﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Paging</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="../webjars/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../webjars/css/global.css" media="all">
		<link rel="stylesheet" href="../webjars/plugins/font-awesome/css/font-awesome.min.css">
	</head>

	<body>
		<div style="margin: 15px;">
			
			<fieldset class="layui-elem-field">
				<legend>演示</legend>
				<div class="layui-field-box">
					<div>
						<form id="search-from">
							<input type="text" name="clientId" />
							<button type="button" lay-filter="J-search" id="J-search">搜索</button>
						</form>
						<table id="apple-table" class="site-table table-hover" lay-data="{height:315, url:'/admin/clientDetails/list2', page:true, id:'test'}">
							<thead>
								<tr>
									<th><input type="checkbox" id="selected-all"></th>
									<th>姓名</th>
									<th>年龄</th>
									<th>操作</th>
								</tr>
							</thead>
							<!--内容容器-->
							<tbody id="con"></tbody>
						</table>
						<!--分页容器-->
						<div id="paged"></div>
					</div>
					
				</div>
			</fieldset>
			
			
		</div>
		<!--模板-->
		<script type="text/html" id="conTemp">
			{{# layui.each(d.data, function(index, item){ }}
			<tr>
				<td><input type="checkbox"></td>
				<td>{{ item.clientId }}</td>
				<td>{{ item.clientName }}</td>
				<td>
					<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
					<a href="/manage/article_edit_1" class="layui-btn layui-btn-mini">编辑</a>
					<a href="javascript:;" data-id="1" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
				</td>
			</tr>
			{{# }); }}
		</script>
		<script type="text/javascript" src="../webjars/plugins/layui/layui.js"></script>
		<script>
			layui
				.config({
					base: 'js/'
				})
				.use(['paging', 'code'], function() {
					layui.code();
					var $ = layui.jquery,
						paging = layui.paging();

					var tttt = $('#apple-table').attr('lay-data');
		            try {
		                tttt = new Function("return " + tttt)();
		            } catch(r) {
		            }
					alert(tttt.url);
					
	                paging.init({
	                	paged: true,
	                    openWait: true,
						url: tttt.url,
						elem: '#con', //内容容器
						params: { //发送到服务端的参数
							pageIndex: 1
						},
						tempElem: '#conTemp', //模块容器
						pageConfig: { //分页参数配置
							elem: 'paged', //分页容器
							pageSize: 3, //分页大小
							layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
						},
						success: function() { //渲染成功的回调
							//alert('渲染成功');
						},
						fail: function(msg) { //获取数据失败的回调
							//alert('获取数据失败')
						},
						complate: function(res) { //完成的回调
							//alert('处理完成');
							console.log(res);
						},
						paged : true
					});
					//搜索
					$('#J-search').on('click', function(data) {
						
						var $this = $(this);
						
						 var t = $('#search-from').serializeArray();
						 
						 alert(JSON.stringify(t));
						
						
						var clientId = $this.prev('input[name=clientId]').val();
						if(clientId === '' || clientId.length === 0) {
							layer.msg('请输入关键字！');
							return;
						}
						//调用get方法获取数据
						paging.get({
							clientId: clientId
						});
					});
					
					
					
			});
		</script>
	</body>

</html>